{template 'header'}
<link rel="stylesheet" href="../addons/mx_shop/resources/cgc/swiper/swiper.min.css">
<link rel="stylesheet" href="../addons/mx_shop/resources/cgc/raidalin/radialindicator.css">
<link rel="stylesheet" href="../addons/mx_shop/resources/cgc/css/sgoods/usetime.css">
<!--<link rel="stylesheet" href="../addons/mx_shop/resources/cgc/fonts/mui.ttf">-->
<script src="../addons/mx_shop/resources/cgc/swiper/swiper.min.js"></script>
<script src="../addons/mx_shop/resources/cgc/raidalin/radialIndicator.js"></script>


<body>

<div class="usetime_wrap">
    <header class="mui-bar mui-bar-nav">
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title">设备使用时间</h1>
    </header>

    <div class="sw_cont">

        <!--提示信息-->
        <div class="message">
            <img src="../addons/mx_shop/resources/cgc/images/warning.png" alt="" class="">
            <p class="">多台设备启动时可左右切换查看其它设备哦！</p>
        </div>
        <!--提示信息end-->



        <div class="swiper-container" id="swiper_one">
            <div class="swiper-wrapper">
                <!--loop-->
                <!--swiper-no-swiping-->
                <div class="swiper-slide swiper-no-swiping" v-for="item in items">
                    <div class="name">某某设备名</div>
                    <div class="time_wrap">
                        <div class="indicatorContainer"></div>
                        <p class="num">开启设备数：1</p>
                        <p class="time">00:25:20</p>
                        <p class="endtime">剩余时间</p>
                    </div>
                </div>

                <!--loop end-->
            </div>
            <!--按钮组-->
            <div class="button-prev">
                <img src="../addons/mx_shop/resources/cgc/images/btn_left.jpg" alt="">
            </div>
            <div class="button-next">
                <img src="../addons/mx_shop/resources/cgc/images/btn_right.jpg" alt="">
            </div>
            <!--按钮组end-->
        </div>
    </div>

    <!--暂停/开启设备-->
    <div class="btns_wrap">
        <div class="sebtn">暂停设备</div>
        <div class="endbtn" @click="usend()">使用结束</div>
    </div>
    <input type="hidden" value="{$token}" id="token">
</div>


<script>
$(function(){

    var vm=new Vue({
        el:".usetime_wrap",
        data:{
            items:[
                {initValue:80, maxValue: 100},
                {initValue:50, maxValue: 80},
                {initValue:10, maxValue: 100}
            ]
        },
        methods:{
            lunbo:function(){
                var mySwiper=new Swiper('.swiper-container',{
                 //       autoplay:500
                 //       onlyExternal:true
                    nextButton:'.button-next',
                    prevButton:'.button-prev'

                 });
            },
            xuanran:function(){
                var html=document.getElementsByTagName('html')[0];
                var pageWidth=html.getBoundingClientRect().width;

                var radius = 0;

                if(pageWidth > 431){
                    radius = 130;
                }else if(pageWidth > 375){
                    radius = 130;
                }else if(pageWidth > 360){
                    radius = 117;
                }else if(pageWidth > 320){
                    radius = 112;
                }else{
                    radius = 101;
                }


                this.$http({
                    method:"POST",
                    url:mainApp.getUrl('sgoods/onSGoods'),
                    params:{token:$("#token").val()}
                }).then(function(msg){
                    if(msg.data.status==1){
//                        alert("成功");
                        console.log(msg.data.result);

                    }else{
                        $.show(msg.data.result.message);
                    }
                });

                for(var item in this.items){
                    var initValue= this.items[item].initValue;
                    var maxValue= this.items[item].maxValue;
                    var _this = $('.indicatorContainer').eq(item);
                    radialIndicator(_this, {
                        radius:radius,
                        barBgColor:"transparent",
                        barColor: '#57c5ee',
                        displayNumber: false,
                        barWidth: 3,
                        initValue:initValue,
                        maxValue: maxValue
                    });
                }

            },
            usend:function(){
                $.dialog({
                    type:"warning",
                    message:"确定要结束订单吗？",
                    buttons:[
                        {
                            text:"取消"
                        },
                        {
                            text:"确定",
                            callback:function(){

                            }
                        }
                    ],
                    animate:true
                });
            },
            countdownTime:function(time){


                setInterval(function(){
                    --time;
                    var hour=Math.floor(time/60/60),
                            min=Math.floor((time - hour*60*60)/60),
                            sec=Math.floor(time - hour*60*60 - min*60);

                    hour=hour > 9 ? hour : '0'+hour;
                    min=min > 9 ? min : '0'+min;
                    sec=sec > 9 ? sec : '0' + sec;
                    console.log(hour + ":" + min + ":" + sec);
                },1000);


            }

        }

    });
    vm.lunbo();
//    vm.xuanran();
//    vm.countdownTime(20000);


});
</script>

</body>
</html>